<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IFrame - 用户管理</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/iframe_user_manage.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/modal.css">
</head>
<body>
<!--按钮组-->
<div id="div_controls">
    <button id="btn_add_user" type="button" class="btn btn-success control-item iconfont">&#xe622; 添加账户</button>
    <button id="btn_edt_user" type="button" class="btn btn-secondary control-item iconfont">&#xe8cf; 修改账户</button>
    <button id="btn_del_user" type="button" class="btn btn-danger control-item iconfont">&#xe638; 删除用户</button>
</div>
<!--检索列表-->
<div id="div_user_list">
    <div id="div_user_list_title">您也可以在以下列表中检索您想要的信息</div>
    <div id="div_user_search"><div class="div_user_search_title">搜索用户名</div><input type="text" id="input_search_user" class="form-control"><button id="btn_user_search_user" class="btn btn-primary iconfont">&#xe6ac;</button></div>
    <div class="div_user_list">
        <table class="table_user_list table">
            <thead>
            <tr>
                <th>UID</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
            </thead>
            <tbody id="tbody_user_list">
<!--            <tr>-->
<!--                <td>10001</td>-->
<!--                <td>static name1</td>-->
<!--                <td>pwd123</td>-->
<!--            </tr>-->

            </tbody>
        </table>
    </div>





<!--    模态框定义-->
    <!-- 添加用户 -->
    <div class="modal fade" id="model_add_user_dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="model_add_user_dialog_Label">添加一个用户</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div>请输入欲添加的用户信息：</div>
                    <div>
                        <div>用户名：<input id="input_add_user_username" class="form-control form-control-sm"></div>
                        <div>密  码：<input id="input_add_user_password" class="form-control form-control-sm"></div>
                        <div>年  龄：
                                    <select id="input_add_user_gender" class="form-control form-control-sm">
                                        <option value="1">♂ 男</option>
                                        <option value="2">♀ 女</option>
                                    </select></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="btn_user_add_commit" type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 修改用户 -->
    <div class="modal fade" id="model_edt_user_dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="model_edt_user_dialog_Label">修改用户</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="div_user_edt_form">UID：<input id="input_add_edt_uid" class="form-control form-control-sm"><button id="btn_user_edt_search_uid" class="btn btn-success">查找用户</button></div><hr/>
                    <!-- 用户修改展示卡 -->
                    <div id="div_edt_user_show_card">
                        <div id="div_edt_user_icon"><img src="../pic/img_user.png" alt="USER"/></div>
                        <div id="div_edt_user_content">
                            <form id="fm_edt_user" class="iconfont">
                                <label>
                                    <span>&#xe758;</span><input id="ip_edt_userName" class="form-control">
                                </label>
                                <label>
                                    <span>&#xe7f8;</span><input id="ip_edt_gender" class="form-control">
                                </label>
                                <label>
                                    <span>&#xe62e;</span><input id="ip_edt_birthday" class="form-control">
                                </label>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="btn_user_edt_commit" type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 删除用户 -->
    <div class="modal fade" id="model_del_user_dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="model_del_user_dialog_Label">删除一个用户</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-danger"  data-bs-toggle="tooltip" title="您即将执行一个非常危险的操作">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>
<script src="../js/jquery-3.6.0.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../js/modal.js"></script>
<script src="js/iframe_user_manage.js"></script>
</body>
</html>